<template>
  <div id="app">
    houseId  {{this.paramater.houseId}}<br>
    楼盘名称  {{this.paramater.premisesName}}<br>
    公寓名称  {{this.paramater.flatName}}<br>
    室  {{this.paramater.room}}<br>
    厅  {{this.paramater.hall}}<br>
    <el-form ref="form" :model="form" >
      <el-form-item label="请输入添加楼栋数量">
        <el-input v-model="form.loudong" @change="inputLoudong()" placeholder="请填写数字" style="width: 180px"></el-input>
      </el-form-item>
    </el-form>
    <span v-for="(item,index) in this.loudongArr" class="form-inline m-t-20 p-l-20 col-md-10 m-b-50">
          <div class="form-group m-r-10">
          <label  class="m-r-10">第{{item.loudongNum}}栋</label>
          <label  class="m-r-10">*楼栋名</label>
          <input type="text" class="form-control" v-model="item.name" v-on:input="loudongName($event,index)" placeholder="请填写楼栋名" maxlength="20">&nbsp;&nbsp;
          <label >*共</label>
          <input type="text" maxlength="2" class="form-control" v-model="item.height" v-on:input ="loudongItemFuc($event,index)" placeholder="请填写楼栋层数">
          <label  class="m-r-10">层</label>
          &nbsp;<el-button type="danger" @click="loudongItemDel(index)">删除</el-button><br>
          </div>
        <div class="row m-t-20 title">
          <div class="col-md-8">
            <span class="m-r-10">批量设置为</span>
            <label class="radio-inline">
              <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" @click="setStauts(2,index)"> 已租
            </label>
            <label class="radio-inline">
              <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" @click="setStauts(1,index)" checked> 未租
            </label>
            <span>
              <el-button type="warning" @click="mateRoom(index)">匹配房型</el-button>
            </span>
          </div>
          <div  v-show="mateModalIndex==index">
            <div class="panel-heading">
              配置房型
              <el-button type="info" class="close" aria-label="Close" @click='mateModalIndex= "-1"'><span aria-hidden="true">&times;</span></el-button>
            </div>
            <div class="panel-body">
              <div>选择房型</div>
              <div class="m-t-20">
                <el-button type="info" v-for="(item,index) in mateTypeArr" :class="mateTypeIndex == index ? 'btn btn-warning m-r-10' : 'btn m-r-10'" @click="mateTypeIndex = index" v-text="item.acreage"></el-button>
              </div>
              <!--<div v-for="(item3,index3) in item.louceng" v-show="item3.roomArr.length>0">
                    <span>{{item3.loucengNum}}层</span>
                    <span>{{item3.roomNum}}间</span><br>
                    <span style="cursor: pointer;" @click="typeSelectedAll(index,index3)">全选</span>
                    <div v-for="(item4,index4) in item3.roomArr" class="pu" @click="typeSelected(index,index3,index4)">
                      <span v-text="item4.num"></span><br>
                      <span :class="item4.typeName == '未设置' ? '': 'lv'" v-text="item4.typeName"></span>
                    </div>
                </div>-->
            </div>
            <span v-for="(item3,index3) in item.louceng" v-show="item3.roomArr.length>0">
                    <span>{{item3.loucengNum}}层</span>
                    <span>{{item3.roomNum}}间</span><br>
                    <span><el-button type="info" @click="typeSelectedAll(index,index3)">全选</el-button></span>
                    <div v-for="(item4,index4) in item3.roomArr" class="pu" @click="typeSelected(index,index3,index4)">
                      <span v-text="item4.num"></span><br>
                      <span :class="item4.typeName == '未设置' ? '': 'lv'" v-text="item4.typeName"></span>
                    </div>
            </span>
            <div class="panel-heading">
              <el-button  type="primary" @click='mateModalIndex= "-1"'>保存</el-button>
              <el-button  type="primary" @click='mateModalIndex= "-1"'>关闭</el-button>
            </div>
          </div>
        </div>

        <div class="row m-t-20" v-for="(item1,index1) in item.louceng">
          <div class="col-md-2">
            所在楼层<input type="text" maxlength="2" class="form-control m-l-10 wd50" readonly v-model="item1.loucengNum">
            <el-button type="danger" class="btn btn-warning" @click="loucengDel(index,index1)">删除</el-button>
          </div>
          <div class="col-md-2">
            房间数量<input type="text" maxlength="2" class="form-control m-l-10 wd50" placeholder="" v-model="item1.roomNum" v-on:input="loucengItemFuc($event,index,index1)">
          </div>
          <div class="col-md-8" >
            <div class="loucengItem" v-for="(item2,index2) in item1.roomArr">
              <div  class="btn btn-default" v-text="item2.num"></div>
              <div :class="item2.chuzu ? 'btn btn-success chuzuStatus' : 'btn btn-default chuzuStatus' " v-text="item2.chuzu?'已租':'未租'" @click="changeStatus(index,index1,index2)"></div>
              <span class="del" @click="roomDel(index,index1,index2)">-</span>
            </div>
          </div>
        </div>
    </span>
    <div class="row col-md-8 m-t-20" style="text-align: center;">
      <el-button type="warning" @click="gotoBeforePage">上一步</el-button>
      <el-button type="warning" @click="saveRoom">确定</el-button>
      <el-button type="warning" @click="cancelRoom" >取消</el-button>
    </div>
  </div>
</template>

<script>
import {getTbHouseStyleList,saveCentralLized} from "@/api/housing/centralization";
export default {
  data() {
    return {
      //挂载楼栋信息
      loudongArr: [],
      //挂载匹配房型弹框显示索引,控制让当前点击楼栋弹框显示
      mateModalIndex: "-1",
      //挂载选中风格类型索引
      mateTypeIndex: "0",
      //挂载选中风格数组
      mateTypeArr: [
        /*{id: "dzh", name: "地中海"},
        {id: "ty", name: "田园"},
        {id: "xqx", name: "小清新"}*/
      ],
     form: {
       //挂载楼栋数量
       loudong: '',
     },
     //传过来的参数的集合
     paramater:{
        //house_info表的id
        houseId:'',
        //楼盘名称
        premisesName:'',
        //公寓名称
        flatName:'',
        //室
        room:'',
        //厅
        hall:'',
     },
      //根据house_id查到tb_house_style数据
      houseStyleList:[],
    }
  },
  methods: {
    //输入一共有几栋楼 楼数
    inputLoudong(){
      console.log(this.form.loudong);
      var num = this.form.loudong; //楼栋数量
      console.log(num)
      this.loudongArr = []; //楼栋的集合
      for (let i = 0; i < num; i++) {
         this.loudongArr.push({
            houseId:this.paramater.houseId, //每栋楼的house_info 的id
            name:'',          //每栋楼的名字
            loudongNum:i+1,   //每栋楼的楼栋号数
            louceng:[]       //每栋楼的楼层
         })
      }
      console.log(this.loudongArr)
    },
    //请填写楼栋名 判断输入的楼栋名是否存在
    loudongName(e,index){
        let loudongName = e.data;
      for (let i = 0; i < this.loudongArr.length; i++) {
          if (this.loudongArr[i].name==loudongName && i!=index){
             alert("楼栋名已经存在");
             this.loudongArr[index].name = "";
             return false;
          }
      }
    },
    //请填写楼栋层数
    loudongItemFuc(e,index){
      console.log(e,index);
      if(isNaN(e.data)){
         alert("请输入数字");
         this.loudongArr[index].height = "";
         return false;
      }
      //用户输入的楼层数
      var num = this.loudongArr[index].height;
      var loudongItemArr = [];
      for (let i = 0; i < num; i++) {
        loudongItemArr.push({
            loucengNum:i+1,
            roomNum:"",
            roomArr:[]
        })
      }
      this.loudongArr[index].louceng = loudongItemArr;
    },
    //删除楼栋函数
    loudongItemDel(index){
      this.loudongArr.splice(index,1);
      //用户输入的楼栋数
      this.loudong--;
    },
    //已租未租
    //批量设置状态
    setStauts(num,index){
        var loucengNum = JSON.stringify(this.loudongArr[index].louceng);
        var loucengNumResult;
        if(num=="2"){
          loucengNumResult = JSON.parse(loucengNum.replace(/"chuzu":false/g,'"chuzu":true'));
        }else{
          loucengNumResult = JSON.parse(loucengNum.replace(/"chuzu":true/g,'"chuzu":false'));
        }
        console.log("输出loucengNumResult"+loucengNumResult)
        this.loudongArr[index].louceng = loucengNumResult;
    },
    //匹配房型函数
    mateRoom(index){
        this.mateModalIndex = index;
        console.log("匹配房型函数"+index);
    },
    //房型全选函数
    typeSelectedAll(index,index3){
      var allRoom = this.loudongArr[index].louceng[index3].roomArr;
      var num = this.mateTypeIndex;
      if(num != -1) {
        for(var i=0;i<allRoom.length;i++) {
          this.loudongArr[index].louceng[index3].roomArr[i].type = this.mateTypeArr[num].id;
          this.loudongArr[index].louceng[index3].roomArr[i].typeName = this.mateTypeArr[num].acreage;
        }
      }
    },
    //设置房型函数dzh是地中海
    typeSelected(index,index3,index4){
      var num = this.mateTypeIndex;
      if(num != -1) {
        console.info(this.mateTypeArr[num].name,num)
        //挂载选中id
        this.loudongArr[index].louceng[index3].roomArr[index4].type = this.mateTypeArr[num].id;
        //显示选中文字
        this.loudongArr[index].louceng[index3].roomArr[index4].typeName = this.mateTypeArr[num].acreage;
      }
    },
    //根据house_id获取tb_house_style的list集合
    tbHouseStyleList(houseId){
      getTbHouseStyleList(houseId).then(res=>{
        console.log("查到的tb_house_style");
        console.log(res);
        this.houseStyleList = res;
        this.mateTypeArr = res;
      })
    },
    //删除楼层函数
    loucengDel(index,index1){
      this.loudongArr[index].louceng.splice(index1,1);
      //用户输入的楼层数
      this.loudongArr[index].height--;
    },
    //生成楼栋楼层房间函数
    loucengItemFuc(e,index,index1){
      if(isNaN(e.data)) {
        alert("请输入数字");
        this.loudongArr[index].louceng[index1].roomNum = "";
        return false;
      }
      //用户输入的楼层数
      var num = this.loudongArr[index].louceng[index1].roomNum;
      //当前楼层数
      var currentFloor = this.loudongArr[index].louceng[index1].loucengNum;
      var loucengItemArr = [];
      //房源id
      var houseId = this.paramater.houseId
      //楼盘名称
      var premisesName = decodeURI(this.paramater.premisesName);
      //公寓名称
      var flatName = decodeURI(this.paramater.flatName);
      //室
      var room = this.paramater.room;
      //厅
      var hall=  this.paramater.hall;
      //根据house_id 在 house_style表中找到的list数据‘
      var typeArr = this.houseStyleList;
      console.log("输出typeArr");
      console.log(typeArr);
      var type = typeArr[0].id;
      var typeName = typeArr[0].acreage;

      for(var i=0;i<num;i++) {
        var num1 = 0;
        if(i>8){
          num1 = currentFloor+"/"+(i+1);
        }else{
          num1 = currentFloor+"/0"+(i+1);
        }
        //var num1 = currentFloor+"/0"+(i+1);
        loucengItemArr.push({num:num1,chuzu:false,type:type,typeName:typeName,houseId:houseId,premisesName:premisesName,room:room,hall:hall,flatName:flatName})
      }
      this.loudongArr[index].louceng[index1].roomArr = loucengItemArr;
      console.log("输出louceng的roomArr");
      console.log(this.loudongArr[index].louceng[index1].roomArr);
    },
    //房间切换状态
    changeStatus(index,index1,index2){
      this.loudongArr[index].louceng[index1].roomArr[index2].chuzu = !this.loudongArr[index].louceng[index1].roomArr[index2].chuzu;
    },
    //删除房间函数
    roomDel(index,index1,index2){
      console.info(index,index1,index2);
      this.loudongArr[index].louceng[index1].roomArr.splice(index2,1);
      //用户输入的房间数
      this.loudongArr[index].louceng[index1].roomNum--;
    },
    //返回上一步
    gotoBeforePage(){
       this.$router.push("/housing/centralization");
    },
    //添加数据
    saveRoom(){
      console.log("输出loudongArr");
      console.log(this.loudongArr);
      saveCentralLized(this.loudongArr).then(res=>{
         if(res.flag){
            this.$message.success("添加成功");
            //跳转房态图页面
           this.$router.push("/housing/roomrack");
         }else{
            this.$message.error("添加失败")
         }
      })
    },
    //取消
    cancelRoom(){
      //刷新当前页面
      //this.$router.go(0);
      window.location.reload();
    },
  },
  created() {
     this.paramater.houseId = this.$route.query.houseId;
     this.paramater.premisesName = this.$route.query.premisesName;
     this.paramater.flatName = this.$route.query.flatName;
     this.paramater.room = this.$route.query.room;
     this.paramater.hall = this.$route.query.hall;
     this.tbHouseStyleList(this.paramater.houseId)
  }
}
</script>

<style scoped>

</style>
